<template>
  <div class="index">
    <!-- 头部 -->
    <div>
      <van-nav-bar title="正在考试" left-text="退出考试" right-text="提交试卷" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    </div>
    <!-- 倒计时 -->
    <div class="times">
      <van-count-down :time="time" format="HH 时 mm 分 ss 秒" @finish="finish" />
    </div>
    <!-- 进度条 -->
    <div class="sop">
      <van-progress :percentage="sop" max="100" v-if="sop" />
    </div>
    <!-- 题目 -->
    <examination :single="single" :selection="selection" :judge="judge" :operation="operation" :disabled="disfalgs" ref="mychild"></examination>
    <!-- 选题 -->
    <div>
      <van-button type="primary" @click="showPopup" class="xuanti"> 题号</van-button>
      <van-popup v-model="show" position="bottom" class="xuanti1" closeable>
        <van-divider class="xuantiP">单选题</van-divider>
        <!-- 循环 判断是否有值 点击可以跳转:class="index1 == issicolor[index1] ? 'blue' : 'gray'" -->
        <div class="ocolor">
          <div v-for="sing in single.length" :key="sing.id" @click="singl(sing - 1, sing)" :class="sing == issicolor[sing] ? 'blue' : 'gray'">
            {{ sing }}
          </div>
        </div>

        <van-divider class="xuantiP">多选题</van-divider>
        <div class="ocolor">
          <div v-for="sele in selection.length" :key="sele.id" @click="selec(sele - 1)" :class="sele == issecolor[sele] ? 'blue' : 'gray'">
            {{ sele }}
          </div>
        </div>

        <van-divider class="xuantiP">判断题</van-divider>
        <div class="ocolor">
          <div v-for="judg in judge.length" :key="judg.id" @click="judgs(judg - 1)" :class="judg == isjucolor[judg] ? 'blue' : 'gray'">
            {{ judg }}
          </div>
        </div>
        <van-divider class="xuantiP">操作题</van-divider>
        <div class="ocolor">
          <div v-for="oper in operation.length" :key="oper.id" @click="opers(oper - 1)" :class="oper == isopcolor[oper] ? 'blue' : 'gray'">
            {{ oper }}
          </div>
        </div>
      </van-popup>
    </div>
    <van-button type="primary" @click="upItem" class="upItem">上一题</van-button>
    <van-button type="primary" @click="nexItem" class="nexItem">下一题</van-button>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import { CountDown } from 'vant'
import { NavBar } from 'vant'
import { Pagination } from 'vant'
import { Button } from 'vant'
import { Toast } from 'vant'
import { Dialog } from 'vant'
import { Popup } from 'vant'
import { Progress } from 'vant'
import examination from '../components/examination'

export default {
  components: { examination },
  comments: {
    examination
  },
  name: 'ExamIdex',
  data() {
    return {
      disfalgs: false,
      itemS: 0,
      // 判断选题
      issicolor: [],
      issecolor: [],
      isjucolor: [],
      isopcolor: [],
      // 底部弹出
      show: false,
      //总题数
      cont: 0,
      currentPage: 1,
      // 倒计时
      time: 2 * 60 * 60 * 1000,
      // 题目数据
      single: [{}],
      selection: [{}],
      judge: [{}],
      operation: [{}],
      // 保存数据
      single_key: [],
      selection_key: [],
      judge_key: [],
      operation_key: [],
      // 转换后的多选
      selection_key2: [],
      // 所有题目
      dataList: [{}],
      selection_sroce: [],
      f1: '',
      f2: '',
      f3: '',
      f4: ''
    }
  },
  methods: {
    // 选题
    showPopup() {
      this.show = true
      this.dates()
    },
    // 选题调整
    singl(e) {
      this.$refs.mychild.singl(e)
      this.show = false
      this.onitems()
    },
    selec(e) {
      this.$refs.mychild.selec(e)
      this.show = false
      this.onitems()
    },
    judgs(e) {
      this.$refs.mychild.judgs(e)
      this.show = false
      this.onitems()
    },
    opers(e) {
      this.$refs.mychild.opers(e)
      this.show = false
      this.onitems()
    },
    // 判断有无值渲染选题的不同
    dates() {
      this.onexamda()
      // console.log(this.selection_key)
      for (let it = 0; it < this.single.length; it++) {
        if (this.single_key[it] != null) {
          let its = it + 1
          this.issicolor[its] = it + 1
        }
      }
      for (let it = 0; it < this.selection.length; it++) {
        if (this.selection_key[it] != null) {
          let its = it + 1
          this.issecolor[its] = it + 1
        }
      }
      for (let it = 0; it < this.judge.length; it++) {
        if (this.judge_key[it] != null) {
          let its = it + 1
          this.isjucolor[its] = it + 1
        }
      }
      for (let it = 0; it < this.operation.length; it++) {
        if (this.operation_key[it] != null) {
          let its = it + 1
          this.isopcolor[its] = it + 1
        }
      }
    },

    // 上一题
    upItem() {
      this.$refs.mychild.upItem()
      this.onitems()
    },
    // 下一题
    nexItem() {
      this.$refs.mychild.nexItem()
      this.onitems()
    },
    // 倒计时结束
    finish() {
      Toast('考试结束')
      this.onexamda()
      // 进行判断当用户没有答题时 保存的值默认为空
      for (let it = 0; it < this.single.length; it++) {
        if (this.single_key[it] == null) {
          this.single_key[it] = ''
        }
      }
      for (let it = 0; it < this.selection.length; it++) {
        if (this.selection_key[it] == null || this.selection_key[it].length == 0) {
          this.selection_key[it] = ''
        }
      }
      for (let it = 0; it < this.judge.length; it++) {
        if (this.judge_key[it] == null) {
          this.judge_key[it] = ''
        }
      }
      // 操作题
      for (let it = 0; it < this.operation.length; it++) {
        if (this.operation_key[it] == null) {
          this.operation_key[it] = '我没做'
        }
      }
      // 多选进行转换
      for (let index = 0; index < this.selection_key.length; index++) {
        if (this.selection_key[index] == null || this.selection_key[index].length == 0) {
          this.selection_key2[index] = this.selection_key[index]
        } else {
          this.selection_key2[index] = this.selection_key[index].join('')
        }
      }
      this.onAjax()
    },
    // 退出考试
    onClickLeft() {
      Dialog.confirm({
        title: '正在考试',
        message: '你是否确定退出考试'
      })
        .then(() => {
          this.$router.push('index')
        })
        .catch(() => {
          // on cancel
        })
    },
    // 提交答案的ajax方法
    onAjax() {
      axios({
        method: 'post',
        url: this.baseURL + '/api/api/correcting',
        data: {
          // 用户id
          id: localStorage.getItem('id'),
          // 科目名称
          subject: localStorage.getItem('subject_name'),
          //所有的题目
          exam_name: this.dataList,
          // 用户选择答案
          single_key: this.single_key,
          selection_key: this.selection_key2,
          judge_key: this.judge_key,
          operation_key: this.operation_key,
          selection_sroce: this.selection_key
        }
      }).then((res) => {
        // console.log(res)
        if (res.data.code == 1) {
          Toast('成功提交')
          this.$router.push('/sroucIndex')
        }
      })
    },
    // 获取考试答案内容
    onexamda() {
      let arr = this.$refs['mychild'].onexamda()
      this.single_key = arr[0]
      this.selection_key = arr[1]
      this.judge_key = arr[2]
      this.operation_key = arr[3]
    },
    onitems() {
      let arr = this.$refs['mychild'].onitems()
      this.itemS = arr
    },
    ondate(oi, oitems, fl1, fl2, fl3, fl4) {
      this.$refs.mychild.ondate(oi, oitems, fl1, fl2, fl3, fl4)
    },
    // 提交试卷
    onClickRight() {
      this.onexamda()
      // 单选题答案是否都有选择
      for (let it = 0; it < this.single.length; it++) {
        if (this.single_key[it] == null) {
          Toast('您的单选题未完成')
          this.itemS = it
          this.f1 = true
          // console.log(this.f1)
          this.f2 = this.f3 = this.f4 = false
          this.ondate(it, this.itemS, this.f1, this.f2, this.f3, this.f4)
          return false
        }
      }
      // 多选题答案是否都有选择
      for (let it = 0; it < this.selection.length; it++) {
        if (this.selection_key[it] == null || this.selection_key[it].length == 0) {
          Toast('您的多选题未完成')
          this.itemS = it + this.single.length
          this.f2 = true
          this.f1 = this.f3 = this.f4 = false
          this.ondate(it, this.itemS, this.f1, this.f2, this.f3, this.f4)
          return false
        }
      }
      // 判断题答案是否都有选择
      for (let it = 0; it < this.judge.length; it++) {
        if (this.judge_key[it] == null) {
          Toast('您的判断题未完成')
          this.itemS = it + this.single.length + this.selection.length
          this.f3 = true
          this.f1 = this.f2 = this.f4 = false
          this.ondate(it, this.itemS, this.f1, this.f2, this.f3, this.f4)
          return false
        }
      }
      // 操作题
      for (let it = 0; it < this.operation.length; it++) {
        if (this.operation_key[it] == null) {
          this.operation_key[it] = '我没做'
        }
      }
      // 多选转换
      for (let index = 0; index < this.selection_key.length; index++) {
        this.selection_key2[index] = this.selection_key[index].join('')
      }
      this.onAjax()
    }
  },
  // 计算属性
  computed: {
    // 进度条
    sop() {
      return parseInt(((this.itemS + 1) / this.cont) * 100)
    }
  },
  mounted() {
    // 获取科目
    axios({
      method: 'post',
      url: this.baseURL + '/api/api/exam_start',
      data: {
        id_card: localStorage.getItem('id_card'),
        subject: localStorage.getItem('subject_name')
      }
    }).then((res) => {
      // console.log(res)
      if (res.data.code == 0) {
        this.$router.push('/index')
        Toast(res.data.msg)
      }
      this.dataList = res.data
      this.single = res.data.single
      this.selection = res.data.selection
      this.judge = res.data.judge
      this.operation = res.data.operation
      this.cont = this.single.length + this.selection.length + this.judge.length + this.operation.length
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.times {
  text-align: center;
}
.upItem {
  position: fixed;
  left: 3%;
  bottom: 3%;
}
.nexItem {
  position: fixed;
  right: 3%;
  bottom: 3%;
}
.sop {
  margin-top: 0.3rem;
}
.blue {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  width: 20px;
  height: 20px;
  border: 1px solid blue;
  color: blue;
  padding: 2px;
}
.ocolor {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  font-size: 12px;
}
.gray {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  width: 20px;
  height: 20px;
  border: 1px solid gray;
  color: gray;
  padding: 2px;
}
.xuanti {
  position: fixed;
  right: 43%;
  bottom: 3%;
}
.xuanti1 {
  padding: 10px;
}
.xuantiP {
  font-size: 14px;
  color: #1989fa;
  border-color: #1989fa;
}
</style>
